<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>数据统计</el-breadcrumb-item>
            <el-breadcrumb-item>商品库存</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
            <div id="main"  style="width: 800px;height: 650px;" ref="goods_ref" class="goos_class"></div>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum"
                    :page-sizes="[10, 15, 20]"
                    :page-size="queryInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    background
            >
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    import echarts from "echarts";

    export default {
        data() {
            return {
                chartInstance: null,
                queryInfo: {
                    query: "",
                    pagenum: 1,
                    pagesize: 10
                },
                allData: null, //服务器返回的数据
                currentPage: 1,//当前显示的页数
                totalPage: 0, //一共有多少页
                total: 0,
            }
        },
        mounted() {
            this.initChart()
            this.getData()
            window.addEventListener('resize',this.screenAdapter)
            //在页面加载完成的时候主动进行屏幕的适配
            this.screenAdapter()
        },
        methods: {
            //分页
            handleSizeChange(newSize) {
                this.queryInfo.pagesize = newSize;
                this.getData();
            },
            handleCurrentChange(newPage) {
                this.queryInfo.pagenum = newPage;
                this.getData();
            },
            //初始化
            initChart(){
                this.chartInstance = echarts.init(document.getElementById("main"));
                //对图表初始化的配置的控制
                const initOption = {
                        title: {
                            text: '商品库存统计',
                            textStyle: {
                                fontSize: 66
                            },
                            left: 20,
                            top: 20
                        },
                        grid: {
                            top: '20%',
                            left: '3%',
                            right: '6%',
                            bottom: '3%',
                            containLabel: true  //距离是包含坐标轴上的文字
                        },
                        xAxis: {
                            type: 'value',
                        },
                        yAxis: {
                            type: 'category',
                            //显示文字个数
                            axisLabel :
                                {
                                    formatter : function (value)
                                    {
                                        let valueTxt = '';
                                        if (value.length > 3) {
                                            valueTxt = value.substring(0, 7) + '..';
                                        }
                                        else {
                                            valueTxt = value;
                                        }
                                        return valueTxt ;
                                    }
                                }
                        },
                        //柱状图条目背景
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'line',
                                z: 0,
                                lineStyle: {
                                    width: 66,
                                    color: '#F8F8FF'
                                }
                            }
                        },
                        series: [
                            {
                                type: 'bar',
                                barWidth: 30, //柱子的宽度
                                label:{
                                    show: true, //柱子上展示文字
                                    position: 'right',  //文字显示的位置
                                    textStyle: {
                                        color: 'black'
                                    }
                                },
                                itemStyle: {
                                    //每一个柱子的四周的圆角
                                    barBorderRadius: [0,33,33,0],
                                    //指明颜色渐变的方向
                                    //指明不同百分比的颜色值
                                    color: new echarts.graphic.LinearGradient(0,0,1,0,[
                                        //百分之0状态下的颜色值
                                        {
                                            offset: 0,
                                            color: '#5052EE'
                                        },
                                        //百分之100状态下的颜色值
                                        {
                                            offset: 1,
                                            color: '#AB6EE5'
                                        }
                                    ])
                                }
                            }
                        ]
                }
                this.chartInstance.setOption(initOption)
            },
            //获取服务器的数据
            async getData(){
                const {data: res} = await this.$http.get("mgoods/findAllByParams", {
                    params: this.queryInfo
                });
                // console.log(res.data.content);
                this.allData = res.data.content

                // console.log(res.data.totalElements);
                this.updateChart()
                this.total = res.data.totalElements

            },
            //更新图表
            updateChart(){
                //x轴的数据 商品名称 回调函数
                const sellerNames = this.allData.map((item) => {
                    return item.cname
                })
                //y轴的数据 商品库存
                const sellValues = this.allData.map((item) => {
                    return item.count
                })

                // console.log(sellerNames);
                // console.log(sellValues);
                const dataOption = {
                    yAxis: {
                        data: sellerNames,
                    },
                    series: [
                        {
                            type: 'bar',
                            data: sellValues,
                            barWidth: 30, //柱子的宽度
                            label:{
                                show: true, //柱子上展示文字
                                position: 'right',  //文字显示的位置
                                textStyle: {
                                    color: 'black'
                                }
                            },
                            itemStyle: {
                                //每一个柱子的四周的圆角
                                barBorderRadius: [0,33,33,0],
                                //指明颜色渐变的方向
                                //指明不同百分比的颜色值
                                color: new echarts.graphic.LinearGradient(0,0,1,0,[
                                    //百分之0状态下的颜色值
                                    {
                                        offset: 0,
                                        color: '#5052EE'
                                    },
                                    //百分之100状态下的颜色值
                                    {
                                        offset: 1,
                                        color: '#AB6EE5'
                                    }
                                ])
                            }
                        }
                    ]
                }
                this.chartInstance.setOption(dataOption)
            },
            //屏幕适配，当浏览器的大小发生变化的时候，调用方法完成屏幕的适配
            screenAdapter(){
                // console.log(this.$refs.goods_ref.offsetWidth);
                const titleFontSize = this.$refs.goods_ref.offsetWidth / 100 * 3.6
                //和分辨率大小相关的配置项
                const adapterOption = {
                    title: {
                        textStyle: {
                            fontSize: titleFontSize
                        },
                    },
                    //柱状图条目背景
                    tooltip: {
                        axiosPointer:{
                            lineStyle: {
                                width: titleFontSize,
                            }
                        }
                    },
                    series: [
                        {
                            barWidth: titleFontSize, //柱子的宽度
                            itemStyle: {
                                //每一个柱子的四周的圆角
                                barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0],
                            }
                        }
                    ]
                }
                this.chartInstance.setOption(adapterOption)
                //手动的调用图标对象的resize才能产生效果
                this.chartInstance.resize()
            },
        },
        destroyed() {
            window.removeEventListener('resize',this.screenAdapter)
        },


    };
</script>

<style lang="less" scoped>
    canvas{
        border-radius: 20px;
    }
    .goos_class{
        margin: 0 auto;
    }
</style>


